<template>
  <div>
    <div>
      工单列表:
      <div
        v-for="(t,index) in temp_list"
        :key='t.id'
        
      >
        <p>模板id: {{t.id}} | </p>
        <p>模板标题: {{t.title}} |</p>
        <p>模板内容: {{t.content}} |</p>

        <div
          v-for="field in t.content"
          :key="field.label"
        >
          <div v-if="field.type=='text'">
            <label>{{field.label}}:</label><input
              type="text"
              v-model="field.value"
            >
          </div>
          <div v-if="field.type=='select'">
            <label>{{field.label}}:</label>
            <select v-model="field.value">
              <option
                v-for="v in field.values"
                :value="v"
                :key="v"
              >{{v}}</option>
            </select>
          </div>
        </div>
        <div>
          发起人:{{username}}<br>
          审批人:
          <span
            v-for="user in select_users"
            :key="user.id"
          >{{user.username}}=></span><br>
          增加人员:
          <select
            @change="add_user"
            v-model="select_user"
          >
            <option value="">请选择</option>
            <option
              v-for="user in users"
              :key="user.id"
              :value="user.id"
            >{{user.username}}</option>
          </select>
        </div>
        <button @click="tijiao(index)">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      token: localStorage.token || '',
      username: localStorage.username || '',
      uid: localStorage.uid || '',
      temp_list: [],
      users: [
        { id: 1, username: 'admin' },
        { id: 2, username: 'zhangsan' },
        { id: 3, username: 'lisi'}
      ],
      select_users: [],
      select_user: '',
    }
  },
  created() {
    this.get_template()
  },
  methods: {
    get_template() {
      axios.get('template/').then(resp => {
        console.log(resp.data)
        this.temp_list = resp.data.results
        // debugger
        this.temp_list.map(item => {
          item.content = JSON.parse(item.content)
        })
      })
    },
      tijiao(index) {
      console.log(this.temp_list[index])
      var instance = JSON.stringify(this.temp_list[index].content)
      axios.post('/add_flow/',
        { instance: instance, users: this.select_users }, {
        headers: {
          Authorization: 'JWT ' + this.token
        }
      }).then(resp => {
        console.log(resp.data)
      })
    },
    add_user(args) {
      console.log(args)
      this.select_users.push(this.users.find(user => user.id == this.select_user))
      this.select_user = ''
    }
  }
}
</script>

<style>
</style>